<template>
	<view class="first-nav" :style="nav.text_left == '关注' ? 'background:#000000;' : ''">
		<view class="icon-box iconfont " :class="nav.icon_name"></view>
		<view class="middle">
			<view class="text" :style="currentpage == 0 ? 'color:#ffffff;':''" @click="clickchangepage(0)">{{nav.text_right}}</view>
			<view class="text" :style="currentpage == 1 ? 'color:#ffffff;':''" @click="clickchangepage(1)">{{nav.text_left}}</view>
			<view class="selected" :style="currentpage == 0 ? 'left: 32%;':'left: 57%'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "first-nav",
		data() {
			return {
				currentpage: 1,
			};
		},
		props: {
			nav: {
				default: null,
				type: Object,
			}
		},
		methods: {
			// 事件总线改变页面
			changepage() {
				this.$bus.$on('changepage',(x => {
					this.currentpage = x;
				}))
			},
			// 点击头部改变页面
			clickchangepage(e) {
				this.$bus.$emit('clickchangepage',e);
			}
		},
		mounted() {
			this.changepage();
		}
	}
</script>

<style lang="scss">
	.first-nav {
		width: 100%;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		display: flex;
		padding-top: 45px;
		height: 40px;
		line-height: 40px;
		color: #FFFFFF;
		font-size: 18px;

		.icon-box {
			text-align: center;
			color: #FFFFFF;
			width: 20%;
			font-size: 24px;
		}

		.middle {
			width: 60%;
			text-align: center;
			color: #C0C0C0;
			font-weight: 600;
			position: relative;
			.text {
				display: inline-block;
				margin: 0 10px;
				position: relative;
				transition: all 1s;
			}
			.selected {
				transition: all .5s;
				background-color: #FFFFFF;
				width: 24px;
				height: 2px;
				position: absolute;
				bottom: 0;
			}
		}
	}
</style>
